<!-- 侧边导航栏 -->
<template class="w-1/6">
  <v-navigation-drawer color="orange-darken-2" permanent location="left" style="cursor: pointer">
    <v-list>
      <div>
        <img class="img" :src="`http://127.0.0.1:8081${tableData.businessImage}`" alt="商家头像">
        <div class="text-center h-18 text-2xl mt-8">{{ tableData.businessName }}</div>
      </div>
      <v-divider thickness="2px" class="mt-5 border-opacity-50"></v-divider>
      <v-list-item class="my-3 ml-7">
        <v-icon class="iconfont icon-zhuye3"></v-icon><span class="text-lg ml-3 text-white">首页</span>
      </v-list-item>
      <v-divider thickness="2px" class="mt-2 border-opacity-50"></v-divider>
      <v-list-item class="my-3 ml-7" @click="this.$router.push({ path: '/business/productManage' })">
        <v-icon class="iconfont icon-shangpin-"></v-icon><span class="text-lg ml-3 text-white">商品管理</span>
      </v-list-item>
      <v-divider thickness="2px" class="mt-2 border-opacity-50"></v-divider>
      <v-list-item class="my-3 ml-7" @click="this.$router.push({ path: '/business/ordersManage' })">
        <v-icon class="iconfont icon-dingdan"></v-icon><span class="text-lg ml-3 text-white">订单管理</span>
      </v-list-item>
      <v-divider thickness="2px" class="mt-2 border-opacity-50"></v-divider>
      <v-list-item class="my-3 ml-7" @click="this.$router.push({ path: '/business/info' })">
        <v-icon class="iconfont icon-gerenxinxi3"></v-icon><span class="text-lg ml-3 text-white">店铺信息</span>
      </v-list-item>
      <v-divider thickness="2px" class="mt-2 border-opacity-50"></v-divider>
      <!-- 退出按钮 -->
      <v-list-item class="my-3 ml-7" @click="logout">
        <v-icon class="iconfont icon-tuichu2"></v-icon><span class="text-lg ml-3 text-white">退出登录</span>
      </v-list-item>
      <v-divider thickness="2px" class="mt-2 border-opacity-50"></v-divider>
    </v-list>
  </v-navigation-drawer>
</template>


<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/selectBusinessInfo',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" )
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.businessInfo
        }
      } )
    },
    logout() {
      localStorage.removeItem( 'businessToken' )
      this.$router.push( { path: '/business/login' } )
    },
  },
}
</script>
<style scoped>
.img {
  border-radius: 50%;
  height: 140px;
  width: 140px;
  margin: 0 auto;
  border: 4px solid white;
  box-shadow: 5px 4px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-top: 20px;
}
</style>